<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>码码学院</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/global.css">
</head>
<body>
<div id="app" v-cloak>
    <div class="page-header">
        <div class="page-header_inner">
            <img src="/static/logo.png" class="page-header_logo">

            <div class="page-header_menu">

                <a class="link-black" href="/">首页</a>
                <a class="link-black" href="#">客户端</a>
                <a class="link-black" href="/login.html" v-if="!user.id">登录</a>
                <a class="link-black" href="/user/account.html" v-if="user.id">
                    <el-popover placement="bottom" width="200" trigger="hover">
                        <div class="sub-menu">
                            <div>
                                <el-avatar :size="60" style="float: left" :src="user.avatar">
                                    <img src="/upload/image/03b0d39583f48206768a7534e55bcpng"/>
                                </el-avatar>
                                <div style="float: left; padding: 10px">
                                    <div class="user-nickname">{{user.nickname}}</div>
                                    <div class="user-mobile">{{user.mobile}}</div>
                                </div>
                            </div>
                            <div class="button-group">
                                <el-link size="small" :underline="false" href="/user/account.html">我的课程</el-link>
                                <el-link size="small" :underline="false" href="/user/setting.html">账号设置</el-link>
                                <el-link size="small" :underline="false" href="/admin/index.html">管理后台</el-link>
                                <el-link size="small" :underline="false" href="/logout.html">退出登录</el-link>
                            </div>
                        </div>
                        <div slot="reference">
                            <el-avatar :size="32" :src="user.avatar" class="page-header_avatar">
                                <img src="/upload/image/03b0d39583f48206768a7534e55bcpng"/>
                            </el-avatar>
                            个人中心
                        </div>
                    </el-popover>
                </a>
            </div>
        </div>
    </div>

    <div class="page-body">
        <el-carousel height="450px" :autoplay="false">
            <el-carousel-item v-for="(item, index) in carouselList" :key="item" :style="{background: item.bgColor || '#ccc'}">
                <div style="cursor:pointer;" @click="clickCarousel(item)">
                    <el-image v-if="item.imageUrl" :src="item.imageUrl" style="width: 1200px; height: 450px; display: block; margin: 0 auto;"></el-image>
                </div>
            </el-carousel-item>
        </el-carousel>

        <div class="panel">
            <div class="panel-title">热门课程</div>
            <div class="panel-body course-block no-padding">
                <div class="course-block_item" v-for="(course, i) in courseList" @click="detail(course)">
                    <el-image :src="course.poster" style="width: 100%">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                    <div class="course-title">{{course.name}}</div>
                    <div class="course-info">{{course.students}} 人报名</div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-footer">
        <div class="page-footer_inner">
            <div>Copyright © 2021 All Rights Reserved.</div>
            <div>天津码码教育科技有限公司 版权所有 | 服务协议 | 隐私政策 | 侵权投诉 | 联系客服 | 帮助</div>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="/static/global.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {},
            courseList: [],
            carouselList: []
        },
        methods: {
            loadCarouselList: function () {
                let vue = this;

                let url = '/resource/carousel';
                axios.get(url).then(resp => {
                    vue.carouselList = resp.data || [];
                });
            },
            loadCourseList: function () {
                let vue = this;

                let url = '/course/hot?limit=8';
                axios.get(url).then(resp => {
                    vue.courseList = resp.data || [];
                });
            },
            clickCarousel: function (carousel) {
                if (carousel.link) {
                    window.open(carousel.link);
                }
            },
            detail: function (course) {
                window.open(`/course.html?courseId=${course.id}`);
            }
        },
        mounted: function () {
            this.loadCarouselList();
            this.loadCourseList();
            this.$loadLoginUser();
        }
    })
</script>
</html>
